<template>
    <div id="box">
      <el-card class="!border-none" shadow="never">
          <el-row>
              <el-col :span="6">
                <span>报表日期：</span>
                <el-date-picker
                  v-model="date"
                  type="date"
                  :disabled-date="disabledDate"
                  placeholder="选择日期"
                  value-format="YYYY-MM-DD"
                />
              </el-col>
              <el-col :span="2" v-if="role_name=='系统管理员'||role_name=='中润管理员'||role_name=='生产调度'">
                  <el-button type="primary" @click="exportExcel">报表导出</el-button>
              </el-col>
          </el-row>
      </el-card>
      <el-card class="!border-none mt-4" shadow="never">
          <el-row>
              <el-col :span="11">
                  
              </el-col>
              <el-col :span="2">
                <span style="font-size: 18px;font-weight: bold;line-height: 32px;">当班调度：</span>
              </el-col>
              <el-col :span="11">
                <el-form :inline="true" :model="formInline" class="demo-form-inline">
                  <el-form-item label="白班：">
                    <el-input v-model="formInline.dbbai1" disabled class="w-[100px]" style="margin-right: 10px;" />
                    <el-input v-model="formInline.dbbai2" disabled class="w-[100px]" />
                  </el-form-item>
                  <el-form-item label="夜班：">
                    <el-input v-model="formInline.dbye1" disabled class="w-[100px]" style="margin-right: 10px;" />
                    <el-input v-model="formInline.dbye2" disabled class="w-[100px]" />
                  </el-form-item>
                </el-form>
              </el-col>
          </el-row>
      </el-card>
      <el-card id="scroll-box" class="!border-none mt-4" shadow="never">
        <div ref="innerRef">
          <div class="bltitle">
            {{date}}生产日报表
          </div>
          <div v-for="item in comArrCom" :key="item.key" :id="item.key" style="margin-bottom: 30px;" v-if="sfsh">
            <component :is="item.value" :isup="true"  :ishistory="1" :date="date" @ischeck="ischeck"></component>
          </div>
          <div v-else>
            <el-empty>
              <template #description>
                <span style="font-size:18px;font-weight: bold;color:red;">该日数据未审核</span>
              </template>
            </el-empty>
          </div>
        </div>
      </el-card>
        
      <!-- 快速定位 -->
      <div class="location" @mouseover="yiru">
        <el-button type="primary">快速定位</el-button>
      </div>
      <div v-show="ishow" class="list" @mouseleave="yichu">
        <div v-for="item in comArrCom" class="item">
          <el-button style="width: 150px;white-space:normal;height: 40px;" :type="defalutKey==item.key?'primary':''" @click="to(item.key)">{{item.name}}</el-button>
        </div>
      </div>
    </div>
</template>
<script lang="ts" setup name="reportHistory">
import ylmglqk from '@/components/report/ylmglqk.vue';
import pmzbjjtzlqk from '@/components/report/pmzbjjtzlqk.vue';
import cpxsjhglyljcqk from '@/components/report/cpxsjhglyljcqk.vue';
import jlscjgykzqk from '@/components/report/jlscjgykzqk.vue';
import gxlscjgykzqk from '@/components/report/gxlscjgykzqk.vue';
import jhscjgykzqk from '@/components/report/jhscjgykzqk.vue';
import dlscqk from '@/components/report/dlscqk.vue';
import jcscqk from '@/components/report/jcscqk.vue';
import jbscqk from '@/components/report/jbscqk.vue';
import yqjzhtqk from '@/components/report/yqjzhtqk.vue';
import hbzb from '@/components/report/hbzb.vue';
import rscfx from '@/components/report/rscfx.vue';
import rgcfx from '@/components/report/rgcfx.vue';

import { getDispatch } from "@/api/check";
import { getYlmglqk } from '@/api/report'
import { GetDateStr } from '@/utils/util'
import useUserStore from '@/stores/modules/user'
import cache from '@/utils/cache'

import { exportExcelApi } from "@/api/check";

const role_name = ref(cache.get('role_name'));

const date = ref(GetDateStr(-1))

const sfsh = ref(false)
const ischeck = ()=>{
  sfsh.value = false
}

watch(date, async () => {
  sfsh.value = true
})

onMounted(()=>{
  // 获取当班调度
  getDispatch({date:date.value}).then((res)=>{
    console.log(res)
    formInline.value = res
  })
  getYlmglqk({isup:true,ishistory:1,date:date.value}).then((res)=>{
    if(res.length!=0){
      sfsh.value = true
    }else{
      sfsh.value = false
    }
  })
})


watch(date, async (n) => {
  // 获取当班调度
  getDispatch({date:date.value}).then((res)=>{
    console.log(res)
    formInline.value = res
  })
  
  getYlmglqk({isup:true,ishistory:1,date:date.value}).then((res)=>{
    console.log('history====',res)
    if(res.length!=0){
      sfsh.value = true
    }else{
      sfsh.value = false
    }
  })
})

const disabledDate = (time: Date) => {
  return time.getTime() > Date.now()  - 24 * 60 * 60 * 1000
}

const formInline = ref({
  dbbai1: '',
  dbbai2: '',
  dbye1: '',
  dbye2: '',
})

const comArr = ref([{
  key:'ylmglqk',
  value:markRaw(ylmglqk),
  name:'原料煤管理情况',
  auth:['report.submit/ylmglqk']
},{
  key:'pmzbjjtzlqk',
  value:markRaw(pmzbjjtzlqk),
  name:'配煤指标及焦炭质量情况',
  auth:['report.submit/pmzbjjtzlqk']
},{
  key:'cpxsjhglyljcqk',
  value:markRaw(cpxsjhglyljcqk),
  name:'产品销售及化工类原料进厂情况',
  auth:['report.submit/cpxsjhglyljcqk']
},{
  key:'jlscjgykzqk',
  value:markRaw(jlscjgykzqk),
  name:'焦炉生产及工艺控制情况',
  auth:['report.submit/jlscjgykzqk']
},{
  key:'gxlscjgykzqk',
  value:markRaw(gxlscjgykzqk),
  name:'干熄炉生产及工艺控制情况',
  auth:['report.submit/gxlscjgykzqk']
},{
  key:'jhscjgykzqk',
  value:markRaw(jhscjgykzqk),
  name:'净化生产及工艺控制情况',
  auth:['report.submit/jhscjgykzqk']
},{
  key:'dlscqk',
  value:markRaw(dlscqk),
  name:'动力生产情况',
  auth:['report.submit/dlscqk']
},{
  key:'jcscqk',
  value:markRaw(jcscqk),
  name:'甲醇生产情况',
  auth:['report.submit/jcscqk']
},{
  key:'jbscqk',
  value:markRaw(jbscqk),
  name:'精苯生产情况',
  auth:['report.submit/jbscqk']
},{
  key:'yqjzhtqk',
  value:markRaw(yqjzhtqk),
  name:'园区介质互通情况',
  auth:['report.submit/yqjzhtqk']
},{
  key:'hbzb',
  value:markRaw(hbzb),
  name:'水质指标分析',
  auth:['report.submit/hbzb']
},{
  key:'rscfx',
  value:markRaw(rscfx),
  name:'日生产分析',
  auth:['report.submit/rscfx']
},{
  key:'rgcfx',
  value:markRaw(rgcfx),
  name:'日工程分析',
  auth:['report.submit/rgcfx']
}]);


const userStore = useUserStore()
const permissions = ref(userStore.perms)

const comArrCom = computed(() => {
  let arr = []
  if(permissions.value[0]=='*'){
    return comArr.value;
  }
  for (let p = 0; p < permissions.value.length; p++) {
    for (let i = 0; i < comArr.value.length; i++) {
      if(permissions.value[p]==comArr.value[i].auth[0]){
        arr.push(comArr.value[i])
      }
    }
  }
  return arr;
})



function exportExcel(){
  exportExcelApi({
    date:date.value
  }).then((res:any) => {
    console.log(res)
    window.location.href=res.path
  })
}

// 快速定位相关代码
const ishow = ref(false)
const defalutKey = ref('')
function yiru(){
  console.log('移入')
  ishow.value = true
}
function yichu(){
  console.log('移出')
  ishow.value = false
}
const scrollbarRef = inject('scrollbarRef')
const innerRef = ref<HTMLDivElement>()
function to(key:any){
  defalutKey.value = key
  const element = document.querySelector('#'+key)
  scrollbarRef.value!.setScrollTop(element.offsetTop)
}
</script>

<style scoped>
  .el-form .el-form-item{
    margin-bottom: 0;
  }
  .bltitle{
    height: 44px;
    font-size: 20px;
    text-align: center;
    font-weight: bold;
  }
  .location{
    position: fixed;
    top:215px;
    left:237px;
  }
  .location button{
    background: rgba(70, 100, 255,0.5);
  }
  .list{
    position: fixed;
    text-align: center;
    width: 200px;
    background: #eee;
    top:15%;
    left:230px;
    border-radius: 5px;
    border: 1px solid #aaa;
  }
  .item{
    margin:10px 5px;
  }
</style>